<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">


        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text,record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <template slot="carbonData" slot-scope="text,record">
          {{record.carbonData}}  {{record.carbonMolecule}}/{{record.carbonDenomintor}}  
        </template>

        <template slot="targetName" slot-scope="text,record">
          {{record.targetName}} | {{record.year}}
        </template>

        <template slot="statusSlot" slot-scope="text,record">
          <div style="background-color: #00A0FF; color: white; border-radius: 12px;" v-if="record.status == 1" >{{$t('message.Pending_processing')}}</div>
          <div style="background-color: #008F4D; color: white; border-radius: 12px" v-else>{{$t('message.Already_filled_in')}}</div>
        </template>

        <template slot="dataSlot" slot-scope="text,record">
          <div v-if="record.status == 1">
            <a-input v-model="record.data"  style="width: 60px; text-align: center " ></a-input> {{record.dataUnitText}}
          </div>

          <div v-else>
            <a-input  v-model="record.data"  style="width: 60px; text-align: center " disabled></a-input> {{record.dataUnitText}}
          </div>
        </template>

        <template slot="datavoucherSlot" slot-scope="text,record">
            <j-upload v-model="record.dataVoucher" :number="3" style="max-width: 100px" :disabled="true"></j-upload>
        </template>

        <span slot="action" slot-scope="text, record">
          <div style="display: flex; align-items: center;justify-content: center">
            <j-upload v-if="record.status == 1" v-model="record.dataVoucher" :buttonVisible="false" :showUploadList="false" :number="1" style="max-width: 100px"></j-upload>
            <a-divider v-if="record.status == 1"  type="vertical" />
            <a v-if="record.status == 1"  @click="toEdit(record)">{{$t('message.submit')}}</a>
            <a v-else @click="openEditModel(record)">{{$t('message.modify')}}</a>
          </div>
        </span>
      </a-table>

    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'CyInvitationFillInForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/CyInvitationFillIn/cyInvitationFillIn/add",
          edit: "/CyInvitationFillIn/cyInvitationFillIn/edit",
          queryById: "/CyInvitationFillIn/cyInvitationFillIn/queryById"
        },
        dataSource:[],
        // 表头
        columns: [
          {
            title: this.$t('message.Scope_classification'),      
            align:"center",
            dataIndex: 'standardId_dictText'
          },
          {
            title: this.$t('message.Emission_source'),   
            align:"center",
            dataIndex: 'source'
          },
          {
            title: this.$t('message.Emission_factor_values'),    
            align:"center",
            dataIndex: 'carbonData',
            scopedSlots: { customRender: 'carbonData' }
          },
          {
            title: this.$t('message.activity/facilities'),     
            align:"center",
            dataIndex: 'activitieId_dictText'
          },
          {
            title: this.$t('message.Inviter'),     
            align:"center",
            dataIndex: 'userId_dictText'
          },
          {
            title: this.$t('message.Invitation_time'),     
            align:"center",
            dataIndex: 'inviteTime'
          },
          {
            title: this.$t('message.Invitee'),     
            align:"center",
            dataIndex: 'inviteUserId_dictText'
          },
          {
            title: this.$t('message.State'),     
            align:"center",
            dataIndex: 'status',
            scopedSlots: { customRender: 'statusSlot' }
          },
        ],
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;

        // 查询出核算的所有填报进度

        getAction("/CyInvitationFillIn/cyInvitationFillIn/processList",{
          checkId: this.model.id 
        }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
        }
      });
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>